<template>
  <el-result v-if="contestId && !compairTime()" icon="info" title="考试尚未开始">
    <template #extra>
      <br />
      <br />
      <el-button @click="router.back()" type="warning">返回</el-button>
    </template>
  </el-result>
    <el-result v-else-if="contestId && !isEnd()" icon="info" title="考试尚未结束">
    <template #extra>
      <br />
      <br />
      <el-button @click="router.back()" type="warning">返回</el-button>
    </template>
  </el-result>
  <div
    v-else-if="scoreData"
    class="rank-container"
    style="
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    "
  >
    <h1>{{ contestName }}排行榜</h1>
    <table class="rank-table">
      <thead>
        <tr>
          <th>排名</th>
          <th>用户名</th>
          <th>总分</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in sortedRankList" :key="index">
          <td>{{ item.rank }}</td>
          <td>{{ item.userName }}</td>
          <td>{{ item.totalScore }}</td>
        </tr>
      </tbody>
    </table>
    <div>
      <el-button type="primary" @click="exitContest()">退出</el-button>
    </div>
  </div>

  <el-result v-else icon="info" title="还没有参加考试">
    <template #extra>
      <br />
      <br />
      <el-button @click="router.push('/contest/list')" type="primary"
        >返回我的考试列表</el-button
      >
    </template>
  </el-result>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import ctfScore from "@/api/CtfScore";
import { userInfo } from "@/stores/userinfo";
import router from "@/router";
import contestQuery from "@/api/modules/contestQuery";
const timeToStart = ref();
const timeToEnd = ref();
const contestId = ref(null);
const userStore = userInfo();
// 定义一个响应式变量来存储后端返回的数据
const scoreData = ref<any>(null);
const contestName = ref<string>("");

// 在组件挂载后获取数据
onMounted(() => {
  ctfScore.getScore(userStore.onGoingContest).then((response) => {
    // 将获取到的数据存储到 scoreData 中
    scoreData.value = response.data;
    // 获取第一个条目的比赛名称作为标题
    if (scoreData.value && scoreData.value.length > 0) {
      contestName.value = scoreData.value[0].contest.contestName;
    }
    // 在控制台打印数据
    console.log(scoreData.value);
  });
  contestId.value = userStore.onGoingContest;
    if (contestId.value) {
    resetTime();
    setEndTime();
  }
});

// 定义 sortedRankList
const sortedRankList = computed(() => {
  if (!scoreData.value || !scoreData.value.length) return null;

  return scoreData.value.map((item: any, index: number) => ({
    rank: index + 1,
    userName: item.user.userName,
    totalScore: item.score.totalScore,
  }));
});

const exitContest = () => {
  userStore.onGoingContest = null;
  router.push("/");
};

//判断考试是否开始，开始返回false
const compairTime = () => {
  if (Date.now() > timeToStart.value.getTime()) {
    return true;
  }
};
//判断考试是否结束
const isEnd = () => {
  if (Date.now() > timeToEnd.value.getTime()) {
    return true;
  }
};

//查询考试开始时间
const resetTime = () => {
  contestQuery.queryStartTime({ contestId: contestId.value }).then((res) => {
    timeToStart.value = new Date(res.data as string);
  });
};
const setEndTime = () => {
  contestQuery.queryEndTime({ contestId: contestId.value }).then((res) => {
    timeToEnd.value = new Date(res.data as string);
  });
};
</script>

<style scoped>
.rank-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
  /* background-color: #f9f9f9; */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  /* color: #333; */
}

.rank-table {
  width: 100%;
  border-collapse: collapse;
}

.rank-table th,
.rank-table td {
  padding: 0.75rem;
  /* border-bottom: 1px solid #ddd; */
  text-align: center;
}

.rank-table th {
  /* background-color: #f2f2f2; */
  font-weight: 600;
}
</style>
